<template>
    <div class="conent">
        <!-- 中间内容 -->
        <div class="box">
            <!-- left -->
            <div class="box-left">

            </div>
            <!-- right -->
            <div class="box-right">
                <div class="right-conent">
                    <!-- title -->
                    <div class="title">智慧城市广告管理平台</div>
                    <!-- tip -->
                    <div class="tip">欢迎登录</div>
                    <!-- input -->
                    <div class="input">
                        <el-input prefix-icon="el-icon-user" size="medium" v-model="name" placeholder="请输入账号"></el-input>
                    </div>
                    <div class="input">
                        <el-input prefix-icon="el-icon-lock" size="medium" v-model="paw" placeholder="请输入密码"
                            show-password></el-input>
                    </div>
                    <!-- 按钮 -->
                    <el-button @click="login" class="btn-box" type="primary">立即登录</el-button>
                    <!-- paw -->
                    <div class="paw-box">
                        <div class="paw-left" @click="clickInput">
                            <div class="paw-radio">
                                <div v-if="sate" class="paw-dian"></div>
                            </div>
                            <span>30天内免登录</span>
                        </div>
                        <div class="noPaw">忘记密码</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    components: {

    },
    name: '',
    data() {
        return {
            name: '',   // admin
            paw: '',    // 123456
            sate: false
        };
    },
    methods: {
        clickInput() {
            this.sate = !this.sate;
        },
        // 登陆验证
        login() {
            // 确认是否填写账户
            if (this.name.length == 0) {
                this.$message({ 
                    message: '请输入账号',
                    type: 'warning'
                });
                return
            }
            // 确认是否填写密码
            if (this.paw.length == 0) {
                this.$message({
                    message: '请输入密码',
                    type: 'warning'
                });
                return
            }
            // 确认账户是否正确
            if (this.name != 'admin') {
                this.$message.error('账号错误！');
                return;
            }
            // 确认密码是否正确
            if (this.paw != '123456') {
                this.$message.error('密码错误！');
                return;
            }

            this.$message({
                message: '恭喜你，登录成功！',
                type: 'success'
            });

        }
    },
    mounted() {

    }
};
</script>
<style scoped>
.conent {
    width: 100%;
    min-width: 1520px;
    height: 100vh;
    background: rgba(235, 236, 237, 1);

    display: flex;
    align-items: center;
    justify-content: center;
}

.box {
    width: 1520px;
    height: 780px;
    background: #fff;
    border-radius: 30px;

    display: flex;

    overflow: hidden;
}

.box-left {
    width: 50%;
    height: 780px;
    background: url('../assets/login-bg.png');
    background-size: 100% 100%;
}

.box-right {
    width: 50%;
    height: 780px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.right-conent {}

.title {
    font-size: 40px;
    font-weight: 500;
    line-height: 57.92px;
    color: rgba(0, 0, 0, 1);
}

.tip {
    margin-top: 10px;
    font-size: 24px;
    font-weight: 400;
    line-height: 34.75px;
    color: rgba(0, 0, 0, 1);
    padding-bottom: 20px;
}

.el-input--medium .el-input__inner {
    border: 1px solid red !important;
}

.input {
    margin-top: 25px;
    /* .el-input--medium {
        height: 52px !important;
        display: flex;
        align-items: center;
    }

    ::v-deep .el-input--medium .el-input__inner {
        background: #000 !important;
    } */
}

.el-input--medium .el-input__inner {
    height: 52px !important;
}


.btn {
    width: 100%;
}

.el-button--primary {
    width: 100%;
    height: 52px;

}

.paw-box {
    margin-top: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    /* .noPaw {
        font-size: 16px;
        font-weight: 400;
        line-height: 23.17px;
        color: rgba(81, 123, 255, 1);
    } */
}

.btn-box {
    margin-top: 35px;
}

.paw-left {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.paw-radio {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(0, 0, 0, 1);
    margin-right: 10px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.paw-dian {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #000;
}

.paw-left span {
    font-size: 16px;
    font-weight: 400;
    line-height: 23.17px;
    color: rgba(0, 0, 0, 1);
    cursor: pointer;
}
</style>
